<template>
    <div class="playlistPopUp" ref="playlistPopUp">
        <div class="playlist-popup-header">
            <div :class="{backgroundLayer_header:true}">
                <div :class="{glass:true,showSomething:isHere,isBlur:type == 1}" :style="{backgroundImage:'url(' + playlistHeaderData.backgroundCoverUrl + ')'}"></div>
            </div>
            <div class="pp-header-img">
                <slot name="back"><span class="iconfont icon-leftarrowpx"></span></slot>
            </div>
            <div class="pp-header-title">
                <p>歌单</p>
            </div>
            <div class="pp-header-search">
                <slot name="search"></slot>
            </div>
            <div class="pp-header-more">
                <slot name="more"></slot>
            </div>
        </div>
        <div class="playlist-popup-DescOne" ref="ppdo" v-if="type == 1" :style="{
            'border-bottom-left-radius': bbpr,
            'border-bottom-right-radius': bbpr}">
            <div class="backgroundLayer" :style="{backgroundImage:'url(' + playlistHeaderData.backgroundCoverUrl + ')'}"></div>  
            <div :class="{ppd_img:true,hideSomething:isHere}">
                <img v-lazy="playlistHeaderData.backgroundCoverUrl">
            </div>
            <div class="ppd_info">
                <p class="ppdInfoMaintitle">{{playlistHeaderData.name}}</p>
                <div class="userInfoMation">
                    <div class="userInfoMation_img">
                        <img v-lazy="playlistHeaderData.creator.avatarUrl">
                    </div>
                    <span class="userInfoMation_name">{{playlistHeaderData.creator.nickname}}</span>
                    <span class="iconfont icon-jiaruyingdan"></span>
                </div>
                <div :class="{ppdIntroduce:true,hideSomething:isHere}">
                    <p>介绍：{{playlistHeaderData.description}}</p>
                </div>
            </div>
        </div>
        <div class="playlist-popup-DescTwo" ref="ppdt" v-if="type == 2" :style="{
            'border-bottom-left-radius': bbpr,
            'border-bottom-right-radius': bbpr}">
            <div class="backgroundLayer_Two">
                <img v-lazy="playlistHeaderData.backgroundCoverUrl">
            </div>
            <div :class="{ppd_desc:true,hideSomething:isHere}">
                <div class="ppd-mainTitle">
                    <h1>{{playlistHeaderData.name}}</h1>
                </div>
                <div class="ppd-subTitle">
                    {{playlistHeaderData.updateFrequency}}
                </div>
                <div class="ppd-detail">
                    {{playlistHeaderData.description}}
                </div>
            </div>
        </div>
        <div class="playlist-popup-content">
            <div :class="{ppc_relate:true,hideSomething:isHere}">
                <div class="ppcAdd">
                    <span class="iconfont icon-jiarufandou"></span>
                    <span class="pp ppcCount">{{playlistHeaderData.subscribedCount|formatNumCount}}</span>
                </div>
                <div class="ppcComment">
                    <span class="iconfont icon-pinglun"></span>
                    <span class="pp ppcCount">{{playlistHeaderData.commentCount|formatNumCount}}</span>
                </div>
                <div class="ppcShare">
                    <span class="iconfont icon-a-fenxiang"></span>
                    <span class="pp ppcCount">{{playlistHeaderData.shareCount|formatNumCount}}</span>
                </div>
            </div>
            <slot name="content">
            </slot>
        </div>
    </div>
</template>
<script>
    export default {
        props:['type'],
        computed:{
            bbpr(){
                let value = [];
                let stance;
                if(this.type == 1){
                    stance = Math.abs(this.ppdo - this.scrollDistance - 52) / 10 + 'px';
                }
                if(this.type == 2){
                    console.log(this.ppdt)
                    stance = Math.abs(this.ppdt - this.scrollDistance - 52) / 10 + 'px';
                }
                value.push('50%');
                value.push(stance);
                return value.join(' '); 
            }   
        },
        data(){
            return {
                playlistHeaderData:{
                    backgroundCoverUrl:"",
                    name:"",
                    creator:{
                        avatarUrl:"",
                        nickname:"",
                    },
                    subscribedCount:"",
                    commentCount:"",
                    shareCount:"",
                    description:"",
                },
                isHere:false,
                scrollDistance:"",
                ppdo:"",
                ppdt:""
            }
        },
        mounted(){
            this.$bus.on('playlistHeaderData',(value)=>{
                this.playlistHeaderData = value;
            })
            this.$refs.playlistPopUp.addEventListener('scroll',()=>{
                this.scrollDistance = this.$refs.playlistPopUp.scrollTop;
                if(this.ppdo && this.scrollDistance > this.ppdo / 2){
                    this.isHere = true;
                }else if(this.ppdo && this.scrollDistance < this.ppdo / 2){
                    this.isHere = false;
                }
                if(this.ppdt && this.scrollDistance > this.ppdt / 2){
                    this.isHere = true;
                }else if(this.ppdt && this.scrollDistance < this.ppdt / 2){
                    this.isHere = false;
                }
            })
        },
        filters:{
            formatNumCount(value){
                if(value>99999 && value < 99999999){
                    return parseInt(value / 10000) + "万";
                }
                else if(value > 99999999){
                    return parseInt(value / 100000000) + "亿";
                }
                else{
                    return value;
                }
            },
        },
        watch:{
            playlistHeaderData(){
                if(this.type == 1){
                    this.ppdo = this.$refs.ppdo.offsetHeight;
                }if(this.type == 2){
                    this.ppdt = this.$refs.ppdt.offsetHeight;
                }
            }
        }
    }
</script>